<template>
	<view class="count">
		<view class="back" @click="jump('/pages/user/my_address')">
			<view class="u-p-20">
				<text class="u-font-40">地址</text>
				<text class="u-m-l-20">选择地址</text>
				<u-icon class="float" name="arrow-right" color="#FFFFFF" size="38"></u-icon>
			</view>
		</view>
		<scroll-view :scroll-y="true" :style="{'height':viewHeight+'px'}">
			<submitOrder :orderType="nums" :name="name" :name1="name1" :text="text" :helpbuy="helpbuy" />
			<view class="white u-m-20 round">

				<u-select v-model="show" mode="single-column" :list="redundant" @confirm="confirm2" @cancel="cancel">
				</u-select>
				<u-cell-item title="添加感谢费" :arrow="false" :value="money" @click="show = true"></u-cell-item>
				</u-cell-item>
			</view>
		</scroll-view>
		<!-- 提交订单 -->
		<view class="submitOrder white round u-p-t-30 u-p-b-20" 
		style="bottom: 0;">
			<u-row>
				<u-col span="7" class="u-p-l-20">
					<text class="u-font-30">服务费</text>
					<view class="line red">
						￥<text class="big">{{service_fee}}</text>
						<text class="u-m-l-30 u-light-color" >距离{{dist}}km</text>
					</view>
				</u-col>
				<u-col span="5" class="u-p-r-50">
					<u-button type="primary" style="border-radius: 50rpx;">提交订单</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewHeight:500,//scroll-view的动态高度
				show: false,
				money: '0元', //费用
				nums: 0,
				name: '',
				name1: '',
				text: '',
				helpbuy: '',
				dist:0,			//距离
				service_fee:0,	//服务费
				redundant: [{
						value: '1',
						label: '0元'
					},
					{
						value: '2',
						label: '1元'
					},
					{
						value: '3',
						label: '2元'
					},
					{
						value: '4',
						label: '3元'
					},
					{
						value: '5',
						label: '5元'
					},
					{
						value: '6',
						label: '10元'
					}
				]
			}
		},
		onLoad(option) {
			this.nums = option.type;
			this.name = option.name;
			this.name1 = option.name1;
			this.text = option.text;
			this.helpbuy = option.helpbuy
		},
		onReady() {
			this.getElInfo()
		},
		methods: {
			async getElInfo() {
				const back = await this.$u.getRect('.back');
				const submitOrder = await this.$u.getRect('.submitOrder');
				this.viewHeight=this.$u.sys().windowHeight - (back.height+submitOrder.height)
			},
			confirm2(e) {
				e.map((val, index) => {
					this.service_fee=val.label.replace('元','')*1;
					this.money = val.label;
				})
			},
			cancel(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.back {
		background-color: #2a5aa4;
		color: #FFFFFF;
	}

	.float {
		float: right;
		margin: 10rpx auto;
	}

	.white {
		background-color: #FFFFFF;
	}

	.txt_back {
		background-color: #f5f5f5;
	}

	.submitOrder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.round {
		border-radius: 10rpx;
	}

	.line {
		display: inline-block;
	}

	.red {
		color: red;
	}

	.big {
		font-size: 50rpx;
	}
</style>
